<template>
<!-- disabled属性的值，是根据传入的属性mydisabled的值动态判断 -->
  <button
    class="my-button"
    :disabled="mydisabled ? true : false"
    :class="[
      mytype ? 'my-button-' + mytype : 'my-button-default',
      {
        'is-disabled': mydisabled,
        'is-round': round
      }
    ]"
    @click="emitClick"
  >
    <!--
      1.要实现button的文字自定义，需要利用插槽实现，此时需要注意，要给这个slot一个默认值
      此时有两种方法实现： ①直接在slot内部写一段文字； ②直接利用$slots.default(表示用户是否利用默认插槽在组件innerHTML位置插入了内容) 进行判断
      -->
      <!-- <slot>mybutton</slot> -->
      <i v-if="icon" class="iconfont" :class="icon ? icon : ''"></i>
      <span v-if="!$slots.default">mybutton</span>
      <slot v-else></slot>
  </button>
</template>

<script>
export default {
  // name属性给组件取名
  name: 'MyButton',
  // props: ['mytype'] // 这种写法不好
  props: {
    mytype: {
      // 限制传递过来属性值的类型
      type: String,
      default: 'default'
    },
    mydisabled: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String
    },
    round: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    emitClick () {
      // 发射一个自定义的click事件
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.my-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-color: #dcdfe6;
    color: #fff;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}
.my-button-default {
  color: #1e1e1e;
}
.my-button-primary {
  background-color: #66b1ff;
}
.my-button-success {
  background-color: #67c23a;
}
.my-button-info {
  background-color: #909399;
}
.my-button-waring {
  background-color: #e6a23c;
}
.my-button-danger {
  background-color: #f78989;
}
.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.is-round {
  border-radius: 20px;
}
</style>
